<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="85px" label-position="left">
          <el-col :span="8">
            <el-form-item
              label="客户名称"
            >
              <el-select
                :disabled="$store.state.user.fsiteLevel == 3"
                v-model="listQuery.fsiteNo"
                clearable
                filterable
                class="filter-item"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
      </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="存放地点">
        <el-select
            style="display: inline-block"
            clearable
            filterable
            v-model="listQuery.fpointNo"
            class="filter-item"
            placeholder="请选择存放地点"
          >
            <el-option
              v-for="item in getListfpointNoArea"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item label="序列号">
        <el-input
          v-model="listQuery.fequipmentbarcode"
          clearable
          class="filter-item"
          placeholder="请输入序列号"
        />
      </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="固定资产码">
        <el-input
          v-model="listQuery.fmacno"
          clearable
          class="filter-item"
          placeholder="请输入固定资产码"
        />
      </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态">
        <el-select
          style="display: inline-block"
          clearable
          filterable
          v-model="listQuery.fstate"
          class="filter-item"
          placeholder="请选择设备状态"
        >
          <el-option
            v-for="item in getListfstate"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
        <el-button
          type="primary"
          @click="handleFilter"
          >查找</el-button
        >
        <el-button
         type="success"
          @click="handleCreate"
          >添加</el-button
        >
        <el-button
         type="info"
          @click="handleUpload"
          >导入</el-button
        >
        <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
      </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <JNPF-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column align="center" label="操作" class-name="small-padding" :width="buttonColor.operationTwo">
          <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        align="center"
        :width="buttonColor.line"
        label="序号"
        type="index"
      />
      <el-table-column
        :formatter="formatfpointNo"
        align="left"
        label="存放地点"
        prop="fpointNo"
      />
      <el-table-column
        align="left"
        label="序列号"
        prop="fequipmentbarcode"
      />
      <el-table-column align="left" label="固定资产码" prop="fmacno" />
      <el-table-column align="left" label="管理柜名称" prop="fequipmenttag" />
      <el-table-column align="left" :width="buttonColor.state" label="设备状态" prop="fstate">
        <template slot-scope="scope">
          <span :style="{ color: buttonColor.itemconfirmed }" v-if="scope.row.fstate === 1">{{ scope.row.fstate |
              statusFilter
          }}</span>
          <span :style="{ color: buttonColor.itemisconfirmed }" v-else-if="scope.row.fstate === 2">{{ scope.row.fstate |
              statusFilter
          }}</span>
          <span :style="{ color: buttonColor.iteminvalid }" v-else>{{ scope.row.fstate | statusFilter }}</span>
        </template>
      </el-table-column>
    </JNPF-table>
    <paginations
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
      </div>
    </div>
     <el-dialog
      :fullscreen="true"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :title="textMap[dialogStatus]"
    >
    <el-tabs type="border-card">
      <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent label-width="100px" ref="dataForm" :model="dataForm" :rules="rules">
            <el-col :span="6">
              <el-form-item
              v-if="this.$store.state.user.fsiteLevel == 3"
              label="客户名称"
              prop="fsiteNo"
            >
              <el-select
                v-model="dataForm.fsiteNo"
                clearable
                filterable
                class="filter-item"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="客户名称" prop="fsiteNo" v-else>
              <el-select
                v-if="dialogStatus == 'create'"
                @change="changeFsiteNoAdd"
                v-model="dataForm.fsiteNo"
                clearable
                filterable
                class="filter-item"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-else
                disabled
                v-model="dataForm.fsiteNo"
                clearable
                filterable
                class="filter-item"
                placeholder="请选择客户名称"
              >
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="设备序列号" prop="fequipmentbarcode">
              <el-input
                v-if="dialogStatus == 'create'"
                v-model="dataForm.fequipmentbarcode"
              />
              <el-input v-else disabled v-model="dataForm.fequipmentbarcode" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="固定资产码" prop="fmacno">
              <el-input v-model="dataForm.fmacno" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item  label="设备状态" prop="fstate">
              <el-select
                clearable
                filterable
                v-model="dataForm.fstate"
                class="filter-item"
                placeholder="请选择设备状态"
              >
                <el-option
                  v-for="item in getListfstate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="控制器_IP" prop="fip">
              <el-input v-model="dataForm.fip" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="设备名称" prop="fequipmenttag">
                <el-input
                v-if="dialogStatus == 'create'"
                  v-model="dataForm.fequipmenttag"
                >
                <el-button slot="append" @click="searchDialogEequipmentInfo" icon="el-icon-search"></el-button>
                </el-input>
                <el-input
                v-else
                  disabled
                  v-model="dataForm.fequipmenttag"
                />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="存放地点" prop="fpointNo">
              <el-select
                  style="display: inline-block"
                  @change="fpointNoChange"
                  clearable
                  filterable
                  v-model="dataForm.fpointNo"
                  class="filter-item"
                  placeholder="请选择存放地点"
                >
                  <el-option
                    v-for="item in getListfpointNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="存放位置" prop="fpointSize">
              <el-input v-model="dataForm.fpointSize" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="控制器端口" prop="fport">
              <el-input v-model="dataForm.fport" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="RFID_IP" prop="frfidip">
              <el-input v-model="dataForm.frfidip" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="RFID_PORT" prop="frfidport">
              <el-input v-model="dataForm.frfidport" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="RFID_LINE" prop="frfidid">
              <el-input type="number" v-model="dataForm.frfidid" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="AC断电" prop="fstate3">
              <el-input type="number" v-model="dataForm.fstate3" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报警开启" prop="flamp2">
              <el-input v-model="dataForm.flamp2" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报警结束" prop="flamp3">
              <el-input v-model="dataForm.flamp3" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="缺电状态" prop="fstate4">
              <el-input type="number" v-model="dataForm.fstate4" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作状态" prop="flamp1">
              <el-input v-model="dataForm.flamp1" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态询问" prop="flamp4">
              <el-input v-model="dataForm.flamp4" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="风扇状态" prop="fstate2">
              <el-input type="number" v-model="dataForm.fstate2" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="全部关闭" prop="flamp5">
              <el-input v-model="dataForm.flamp5" />
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="蜂鸣器开" prop="flamp6">
              <el-input v-model="dataForm.flamp6" />
            </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="明细表">
        <JNPF-table
          v-loading="listLoading"
          :height="screenHeight-230"
          :data="dataForm.details"
        >
          <el-table-column :width="buttonColor.line" align="center" label="序号" prop="fseq" />
          <el-table-column
            align="left"
            label="序列号"
            prop="fcatbarcode"
            width="260"
          >
          <template slot-scope="scope">
            <el-input 
              v-model="scope.row.fcatbarcode" 
              v-direction="{ x: 0, y: scope.$index,type:3}"
            >
               <el-button slot="append" icon="el-icon-search" @click="searchDialogcabinet"></el-button>
            </el-input>
          </template>
          </el-table-column>
          <el-table-column
            :formatter="formatfmacno"
            align="left"
            label="固定资产码"
            prop="fmacno"
            width="150"
          />
          <el-table-column
            :formatter="formatfequipmenttag"
            align="left"
            label="储物柜名称"
            prop="fequipmenttag"
          />
          <el-table-column
            align="center"
            label="操作"
            width="80"
            class-name="small-padding"
          >
            <template slot-scope="scope">
               <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
      </el-tab-pane>
    </el-tabs>
      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary"  v-if="dialogStatus == 'create'" @click="createData">确 定</el-button>
      <el-button type="primary" v-else @click="updateData">确 定</el-button>
    </span>
    </el-dialog>
    <equipmentInfoDialog
      :equipmentInfoVisible.sync="equipmentInfoVisible"
      :tableColor="tableColor"
      @equipmentInfoDialog="equipmentInfoDialogValue"
    />
    <cabinetDialog
      v-if="cabinetVisible"
      :cabinetVisible.sync="cabinetVisible"
      :fsiteNo.sync="cabDialogFsiteNo"
      :fpointNo.sync="cabDialogFpointNo"
      :tableColor="tableColor"
      :checkUnBind.sync="checkUnBind"
      @cabinetDialog="cabinetDialogValue"
    />
    <labDialog
      :searchVisiblelab.sync="searchVisiblelab"
      :fsiteNo.sync="labDialogFsiteNo"
      :tableColor="tableColor"
      @labDialog="labDialogValue"
    />
  </div>
</template>
<script>
import { listtsBox, createtsBox, updatetsBox, deletetsBox } from "@/api/tsBox";
import Pagination from "@/components/Pagination";
import {
  getFequipmentbarcode,
  fsiteOptionsByLevel,
  uploadPath2,
  getPointOptions,
  getListArea,
} from "@/api/area";
import { getToken } from "@/utils/auth";
import EquipmentInfoDialog from "@/components/EquipmentInfoDialog";
import CabinetDialog from "@/components/CabinetDialog";
import LabDialog from "@/components/LabDialog";
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
import { listtsCabinet } from "@/api/tsCabinet";
import moment from "moment";
import { getApiUrl } from "@/utils/request";

const statusMap = {
  1: '已启用',
  2: '闲置中',
  8: '已报废',
}

export default {
  name: "ITsBox",
  components: { Pagination, EquipmentInfoDialog, CabinetDialog, LabDialog },
  filters: {
    statusFilter(type) {
      return statusMap[type]
    }
  },
  data() {
    return {
      screenHeight: document.body.clientHeight,
      checkUnBind:1,
      isAdd1: true,
      panelHeight:0,
      labFlag: null,
      getListfpointNoAll: [],
      searchVisiblelab: false,
      labDialogFsiteNo: null,
      getListfpointNo: [],
      getListfpointNoArea: [],
      downUrl: null,
      uploadVisible: false,
      uploadPath2,
      cabDialogFsiteNo: null,
      cabDialogFpointNo: null,
      getListfsiteNo: [],
      buttonColor: buttonColor,
      selectList: [],
      listCabinet: [],
      cabinetVisible: false,
      equipmentInfoVisible: false,
      dataForm1: {
        fseq: undefined,
        fcatbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        fmacno: undefined,
      },
      playsTmp: null,
      actionsTmp: [],

      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        fip: undefined,
        fport: undefined,
        fstate: undefined,
        fupddate: undefined,
        foperator: undefined,
        fpointNo: undefined,
        fmacno: undefined,
        sort: "create_time",
        order: "desc",
      },
      showAll:false,
      dataForm: {
        fsiteNo: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        fip: undefined,
        fport: undefined,
        fstate: undefined,
        fupddate: undefined,
        foperator: undefined,
        id: undefined,
        fspec: undefined,
        fequipmenttype: undefined,
        details: [],
        frfidip: undefined,
        fmacno: undefined,
        frfidport: undefined,
        frfidid: undefined,
        flamp1: undefined,
        flamp2: undefined,
        flamp3: undefined,
        flamp4: undefined,
        flamp5: undefined,
        flamp6: undefined,
        fstate1: undefined,
        fstate2: undefined,
        fstate3: undefined,
        fstate4: undefined,
        fpointNo: undefined,
        fpointSize: undefined,
      },
      tableColor,
      titleColor,
      exportColor,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      rules: {
        fsiteNo: [{ required: true, message: "客户名称不能为空" }],
        feuipmentid: [
          { required: true, message: "管理柜编号不能为空" },
          { type: "number", message: "管理柜编号必须为数字值" },
        ],
        fequipmenttag: [{ required: true, message: "管理柜名称不能为空" }],
        fstate: [{ type: "number", message: "设备状态必须为数字值" }],
      },
      rules1: {
        feuipmentid: [
          { required: true, message: "储物柜编号不能为空" },
          { type: "number", message: "储物柜编号必须为数字值" },
        ],
        fseq: [{ required: true, message: "行号不能为空" }],
        fcatbarcode: [{ required: true, message: "序列号不能为空" }],
        fmacno: [{ required: true, message: "固定资产码不能为空" }],
        fequipmenttag: [{ required: true, message: "储物柜名称不能为空" }],
      },
      getListfstate: [
        { value: 1, label: "已启用" },
        { value: 2, label: "闲置中" },
        { value: 8, label: "已报废" },
      ],
    };
  },
  created() {
    this.keyCode();
    this.downUrl = getApiUrl() + "xlsx/2-3管理柜资料.xlsx";
    this.panelHeight = document.documentElement.clientHeight-420
    listtsCabinet({ limit: -1 })
      .then((response) => {
        this.listCabinet = response.data.data.list;
      })
      .catch(() => {
        this.listCabinet = [];
      });
    fsiteOptionsByLevel(3)
      .then((response) => {
        this.getListfsiteNo = response.data.data.list;
      })
      .catch(() => {
        this.getListfsiteNo = [];
      });
    if (this.$store.state.user.fsiteLevel == 3) {
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
      // 存放地点
      getListArea({ flag: 10, arg1: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.getListfpointNo = response.data.data.list;
          this.getListfpointNoArea = response.data.data.list;
        })
        .catch(() => {
          this.getListfpointNo = [];
          this.getListfpointNoArea = [];
        });
        // 存放地点
        getPointOptions(this.$store.state.user.fsiteNo)
          .then((response) => {
            this.getListfpointNoAll = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNoAll = [];
          });
    }else{
        // 存放地点
        getPointOptions()
          .then((response) => {
            this.getListfpointNoAll = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNoAll = [];
          });
    }
    this.getList();


  },
  computed: {
    headers() {
      return {
        Authorization: getToken(),
      };
    },
  },
  methods: {
     //回车
    keyCode() {
      let direction = this.$getDirection();
      let _this=this;
      direction.on("keyup", function (e, val) {
        if (e.keyCode === 13) {
          if(val.y==_this.dataForm.details.length-1)
          {
            _this.addrow(res=>{
               direction.next();
            })
          }
          else
          {
           direction.next();
          }
        }
        if (e.keyCode === 37) {
          direction.previous();
        }
        if (e.keyCode === 38) {
          direction.previousLine();
        }
        if (e.keyCode === 40) {
          direction.nextLine();
        }
        if (e.keyCode == 39) {
          direction.next();
        }
      });
    },
    //添加行
    addrow(callback){
      this.dataForm.details.push({
        fseq:this.dataForm.details.length+1,
         fboxbarcode:"",
          fmacno:"",
          fequipmenttag:""
      })
      setTimeout(()=>{
      callback(200)
      },300)
    },
    uploadFileSuccess: function (response) {
      this.uploadVisible = false;
      this.$notify.success({
        title: "导入",
        dangerouslyUseHTMLString: true,
        message: response.data,
      });
    },
    handleUpload() {
      this.uploadVisible = true;
    },
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 地点改变
    fpointNoChange() {
      this.dataForm.details = [];
      this.selectList = [];
    },

    changeFsiteNo(data) {
      this.listQuery.fpointNo = "";
      this.getListfpointNoArea = [];
      if (data) {
        // 存放地点
        getListArea({ flag: 10, arg1: data })
          .then((response) => {
            this.getListfpointNoArea = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNoArea = [];
          });
      }
    },

    // 客户名称改变
    changeFsiteNoAdd(data) {
      this.dataForm.fpointNo = "";
      this.getListfpointNo = [];
      this.dataForm.details = [];
      this.selectList = [];
      if (data) {
        // 存放地点
        getListArea({ flag: 10, arg1: data })
          .then((response) => {
            this.getListfpointNo = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNo = [];
          });
      }
    },

    // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value;
      if (value === "add") {
        this.labDialogFsiteNo = this.dataForm.fsiteNo;
      } else {
        this.labDialogFsiteNo = this.listQuery.fsiteNo;
      }
      this.searchVisiblelab = true;
    },

    // 地点弹出框返回值
    labDialogValue(value) {
      if (this.labFlag === "add") {
        this.dataForm.fpointNo = value.lab.fpointNo;
        this.dataForm.details = [];
        this.selectList = [];
      } else {
        this.listQuery.fpointNo = value.lab.fpointNo;
      }
    },

    // 存放地点
    formatfpointNo: function (row, column) {
      if (this.getListfpointNoAll) {
        for (let i = 0; i < this.getListfpointNoAll.length; i++) {
          if (row.fpointNo === this.getListfpointNoAll[i].value) {
            return this.getListfpointNoAll[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 客户名称
    formatfsiteNo: function (row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 储物柜固定资产码
    formatfmacno: function (row, column) {
      if (this.listCabinet) {
        for (let i = 0; i < this.listCabinet.length; i++) {
          if (row.fcatbarcode == this.listCabinet[i].fequipmentbarcode) {
            return this.listCabinet[i].fmacno;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 储物柜名称
    formatfequipmenttag: function (row, column) {
      if (this.listCabinet) {
        for (let i = 0; i < this.listCabinet.length; i++) {
          if (row.fcatbarcode == this.listCabinet[i].fequipmentbarcode) {
            return this.listCabinet[i].fequipmenttag;
          }
        }
        return "";
      } else {
        return "";
      }
    },
     // 储物仓编号
    formatfeuipmentid: function (row, column) {
      if (this.listCabinet) {
        for (let i = 0; i < this.listCabinet.length; i++) {
          if (row.fcatbarcode == this.listCabinet[i].fequipmentbarcode) {
            return this.listCabinet[i].feuipmentid;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 状态
    formatfstate: function (row, column) {
      if (this.getListfstate) {
        for (let i = 0; i < this.getListfstate.length; i++) {
          if (row.fstate == this.getListfstate[i].value) {
            return this.getListfstate[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 设备信息弹出框
    searchDialogEequipmentInfo() {
      this.equipmentInfoVisible = true;
    },

    // 设备信息弹出框
    equipmentInfoDialogValue(value) {
      this.dataForm.feuipmentid = value.info.feuipmentid;
      this.dataForm.fequipmenttag = value.info.fequipmentname;
      this.dataForm.fequipmenttype = value.info.fequipmenttype;
      this.dataForm.fspec = value.info.fspec;
      getFequipmentbarcode({ feuipmentid: value.info.feuipmentid })
        .then((response) => {
          if (response) {
            this.dataForm.fequipmentbarcode = response.data.data;
          }
        })
        .catch(() => {
          this.dataForm.fequipmentbarcode = "";
        });
    },
    // 储物柜弹出框
    searchDialogcabinet() {
      this.cabinetVisible = true;
      this.cabDialogFsiteNo = this.dataForm.fsiteNo;
      this.cabDialogFpointNo = this.dataForm.fpointNo;
    },

    // 储物柜弹出框
    cabinetDialogValue(value) {
      this.dataForm1.fcatbarcode = value.info.fequipmentbarcode;
      this.dataForm1.feuipmentid = value.info.feuipmentid;
      this.dataForm1.fequipmenttag = value.info.fequipmenttag;
      this.dataForm1.fmacno = value.info.fmacno;
    },
    getList() {
      this.listLoading = true;
      if (this.listQuery.fequipmentbarcode == "") {
        this.listQuery.fequipmentbarcode = null;
      }
      listtsBox(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetForm() {
      this.dataForm = {
        feuipmentid: undefined,
        fequipmentbarcode: undefined,
        fequipmenttag: undefined,
        fip: undefined,
        fport: undefined,
        fstate: undefined,
        fupddate: undefined,
        foperator: undefined,
        id: undefined,
        details: [],
        frfidip: undefined,
        fmacno: undefined,
        frfidport: undefined,
        frfidid: undefined,
        flamp1: undefined,
        flamp2: undefined,
        flamp3: undefined,
        flamp4: undefined,
        flamp5: undefined,
        flamp6: undefined,
        fstate1: undefined,
        fstate2: undefined,
        fstate3: undefined,
        fstate4: undefined,
        fpointNo: undefined,
        fpointSize: undefined,
      };
    },
     resetForm1(){
       this.dataForm1={
        fseq: undefined,
        fcatbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        fmacno: undefined,
      }
    },
    handleCreate() {
      this.resetForm();
      if (this.$store.state.user.fsiteLevel == 3) {
        this.dataForm.fsiteNo = this.$store.state.user.fsiteNo;
      } else {
        this.getListfpointNo = [];
      }
      this.dialogStatus = "create";
      this.dataForm.fstate = 1;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });

      // 子表
      this.handleUpdate1()
      this.resetForm1();
      this.dataForm1.fseq = 1
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          createtsBox(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data);
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "成功",
                message: "添加管理柜资料成功",
              });
              this.selectList = [];
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.data,
              });
            });
        }
      });
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.actionsTmp = row;

      if (this.$store.state.user.fsiteLevel != 3) {
        // 存放地点
        getListArea({ flag: 10, arg1: row.fsiteNo })
          .then((response) => {
            this.getListfpointNo = response.data.data.list;
          })
          .catch(() => {
            this.getListfpointNo = [];
          });
      }

      this.playsTmp = [];
      if (row.details) {
        row.details.forEach((v) => {
          this.playsTmp.push(v);
          this.selectList.push(v.fcatbarcode);
        });
      }
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });

       // 子表
      this.handleUpdate1()
      this.resetForm1();
      if(this.dataForm.details.length > 0){
         // 计算行号
        let len = this.dataForm.details.length - 1
        this.dataForm1.fseq = this.dataForm.details[len].fseq + 1
      }else{
        this.dataForm1.fseq = 1
      }

    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          (this.dataForm.foperator = this.$store.state.user.id.toString()),
            (this.dataForm.fupddate = new Date()),
            updatetsBox(this.dataForm, this.$route.query.id)
              .then(() => {
                for (const v of this.list) {
                  if (v.fequipmentbarcode === this.dataForm.fequipmentbarcode) {
                    const index = this.list.indexOf(v);
                    this.list.splice(index, 1, this.dataForm);
                    break;
                  }
                }
                this.dialogFormVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "更新管理柜资料成功",
                });
                this.selectList = [];
              })
              .catch((response) => {
                this.$notify.error({
                  title: "失败",
                  message: response.data.data,
                });
              });
        }
      });
    },
    handleDelete(row) {
      this.$confirm("是否要删除管理柜资料", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletetsBox(row)
            .then((response) => {
              this.$notify.success({
                title: "成功",
                message: "删除管理柜资料成功",
              });
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.data,
              });
            });
        })
        .catch(() => {});
    },

    handleUpdate1(){
      // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });
    },

     // 子表一添加编辑
    handleEdit1(row){
          this.dataForm1 = Object.assign({}, row);
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });

          this.dataForm1.fequipmenttag =this.formatfequipmenttag(row)
          this.dataForm1.fmacno =this.formatfmacno(row)
          this.dataForm1.feuipmentid =this.formatfeuipmentid(row)
    },
    // 子表一编辑保存数据
    editData1() {
      this.$refs["dataForm1"].validate((valid) => {
        if (valid) {
          if(this.dataForm.details.length > 0){
            let temp = [...this.dataForm.details]
            let isRepeat= false
             for (const v of this.dataForm.details) {
              if (v.fseq === this.dataForm1.fseq) {
                const index = this.dataForm.details.indexOf(v);
                // 判断序列号是否重复
                 temp.splice(index, 1);
                 for (const vi of temp) {
                   if(vi.fcatbarcode == this.dataForm1.fcatbarcode){
                     isRepeat = true
                      this.$notify.error({
                            title: '失败',
                            message: '所选序列号重复'
                          })
                      return;
                   }
                 }

                 if(!isRepeat){
                  this.dataForm.details.splice(index, 1, this.dataForm1);
                  this.selectList.splice(index, 1, this.dataForm1.fcatbarcode);
                  this.isAdd1 = false
                  break;
                 }
              }
            }
            if(this.isAdd1){
                // 判断序列号是否重复
                const tem = this.selectList.indexOf(this.dataForm1.fcatbarcode);
                if (tem < 0) {
                  if (valid) {
                    this.dataForm.details.push(this.dataForm1);
                    this.selectList.push(this.dataForm1.fcatbarcode);
                  }
                } else {
                  this.$notify.error({
                    title: "失败",
                    message: "所选序列号重复",
                  });
                  return;
                }
            }
          }else{
                   // 判断序列号是否重复
                const tem = this.selectList.indexOf(this.dataForm1.fcatbarcode);
                if (tem < 0) {
                  if (valid) {
                    this.dataForm.details.push(this.dataForm1);
                    this.selectList.push(this.dataForm1.fcatbarcode);
                  }
                } else {
                  this.$notify.error({
                    title: "失败",
                    message: "所选序列号重复",
                  });
                  return;
                }
          }
            this.resetForm1()
            this.isAdd1 = true
            // 清除验证
            this.$nextTick(() => {
              this.$refs["dataForm1"].clearValidate();
            });
            // 计算行号
             if(this.dataForm.details.length > 0){
              // 计算行号
              let len = this.dataForm.details.length - 1
              this.dataForm1.fseq = this.dataForm.details[len].fseq + 1
            }else{
              this.dataForm1.fseq = 1
            }
        }
      });
    },

    cancle1(){
         this.resetForm1()
         this.isAdd1 = true

          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });

        // 计算行号
        if(this.dataForm.details.length > 0){
          // 计算行号
          let len = this.dataForm.details.length - 1
          this.dataForm1.fseq = this.dataForm.details[len].fseq + 1
        }else{
          this.dataForm1.fseq = 1
        }
    },


    handleDelete1(row) {
      const index = this.dataForm.details.indexOf(row);
      this.dataForm.details.splice(index, 1);
      this.selectList.splice(index, 1);
      this.resetForm1()
       if(this.dataForm.details.length > 0){
         // 计算行号
        let len = this.dataForm.details.length - 1
        this.dataForm1.fseq = this.dataForm.details[len].fseq + 1
      }else{
        this.dataForm1.fseq = 1
      }
    },
    cancel() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.list.forEach((v) => {
        if (v.fequipmentbarcode === this.dataForm.fequipmentbarcode) {
          this.dataForm = this.actionsTmp;
          this.dataForm.details = this.playsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          return;
        }
      });
    },
    // 弹窗点击关闭前的回调
    handleClose() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.list.forEach((v) => {
        if (v.fequipmentbarcode === this.dataForm.fequipmentbarcode) {
          this.dataForm = this.actionsTmp;
          this.dataForm.details = this.playsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          return;
        }
      });
    },

    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>